<template>
  <button @click="onClick($event)" type="button" class="button" :style="{width:width,height: height,background:color,'font-size':size}">
    <slot></slot>
  </button>
</template>

<script>
    export default {
        name: "Mybutton",
        props:{
          color:{
            type:String,
            default:'white'
          },
          _color:{
            type:String,
            default:'red'
          },
          width:{
            type:String,
            default:'auto'
          },
          height:{
            type:String,
            default:'auto'
          },
          size:{
            type:String,
            default:'1.6rem'
          }
        },
      methods:{
          onClick:function (e) {
            var el=e.currentTarget;
            el.style.background=this._color;
            setTimeout(()=>el.style.background=this.color,200);
            this.$emit('btnClick',e);
          }
      }
    }
</script>

<style lang="less" scoped>
  .button{
    line-height: 100%;
    text-align: center;
    font-size: 1.6rem;
    outline: none;
  }
  .button:focus{
    outline: none;
  }
  button:active{
    border-style: none;
  }
</style>
